<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta HTTP-EQUIV="pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <meta HTTP-EQUIV="expires" CONTENT="0">
    <meta content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-apap-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <meta charset="UTF-8">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
    <!--<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">-->
    <!--<meta http-equiv="X-UA-Compatible" content="ie=edge">-->
    <title>一起来做抗霾英雄！</title>
    <link rel="stylesheet" type="text/css" href="<%=path %>/mayday/css/reset.css">
    <link rel="stylesheet" type="text/css" href="<%=path %>/mayday/css/map.css">
</head>
<body>
    <span id="musicControl">
        <a id="mc_play" class="onx">
            <audio id="musicfx" loop="loop" autoplay="true" src="<%=path %>/mayday/audio/m2.mp3"></audio>
        </a>
    </span>
     <div class="map">
        <div class="prompt">
            <img src="<%=path %>/mayday/img/prompt.png" alt="">
        </div>
        <img src="<%=path %>/mayday/img/map.jpg" alt="" class="china">

        <img src="<%=path %>/mayday/img/db-mask.png" alt="" class="db">
        <a class="jump jump-db" href="<%=path %>/mayday/area.html?areaId=DONGBEI">
            <img class="cloud cloud1" src="<%=path %>/mayday/img/cloud1.png" alt="">
            <img class="cloud cloud2" src="<%=path %>/mayday/img/cloud2.png" alt="">
        </a>

        <img src="<%=path %>/mayday/img/hb-mask.png" alt="" class="hb">
        <a class="jump jump-hb" href="<%=path %>/mayday/area.html?areaId=HUABEI">
            <img class="cloud cloud1" src="<%=path %>/mayday/img/cloud1.png" alt="">
            <img class="cloud cloud2-1" src="<%=path %>/mayday/img/cloud2.png" alt="">
            <img class="cloud cloud2-2" src="<%=path %>/mayday/img/cloud2.png" alt="">
        </a>

        <img src="<%=path %>/mayday/img/hd-mask.png" alt="" class="hd">
        <a class="jump jump-hd" href="<%=path %>/mayday/area.html?areaId=HUADONG">
            <img class="cloud cloud1" src="<%=path %>/mayday/img/cloud1.png" alt="">
            <img class="cloud cloud2" src="<%=path %>/mayday/img/cloud2.png" alt="">
        </a>

        <img src="<%=path %>/mayday/img/hn-mask.png" alt="" class="hn">
        <a class="jump jump-hn" href="<%=path %>/mayday/area.html?areaId=HUANAN">
            <img class="cloud cloud1" src="<%=path %>/mayday/img/cloud1.png" alt="">
            <img class="cloud cloud2" src="<%=path %>/mayday/img/cloud2.png" alt="">
        </a>

        <img src="<%=path %>/mayday/img/hz-mask.png" alt="" class="hz">
        <a class="jump jump-hz" href="<%=path %>/mayday/area.html?areaId=HUAZHONG">
            <img class="cloud cloud1" src="<%=path %>/mayday/img/cloud1.png" alt="">
            <img class="cloud cloud2" src="<%=path %>/mayday/img/cloud2.png" alt="">
        </a>
        
        <img src="<%=path %>/mayday/img/xb-mask.png" alt="" class="xb">
        <a class="jump jump-xb" href="<%=path %>/mayday/area.html?areaId=XINAN">
            <img class="cloud cloud1" src="<%=path %>/mayday/img/cloud1.png" alt="">
            <img class="cloud cloud2-1" src="<%=path %>/mayday/img/cloud2.png" alt="">
            <img class="cloud cloud2-2" src="<%=path %>/mayday/img/cloud2.png" alt="">
        </a>
        
        <img src="<%=path %>/mayday/img/xn-mask.png" alt="" class="xn">
        <a class="jump jump-xn" href="<%=path %>/mayday/area.html?areaId=XIBEI">
            <img class="cloud cloud1" src="<%=path %>/mayday/img/cloud1.png" alt="">
            <img class="cloud cloud2-1" src="<%=path %>/mayday/img/cloud2.png" alt="">
            <img class="cloud cloud2-2" src="<%=path %>/mayday/img/cloud2.png" alt="">
        </a>
    </div>
    <script type="text/javascript" src="<%=path %>/mayday/js/jquery-2.2.3.min.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
    <script type="text/javascript">
        //微信jssdk config
        wx.config({
            debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId : '${signObj.appid}', // 必填，公众号的唯一标识
            timestamp : '${signObj.timestamp}', // 必填，生成签名的时间戳
            nonceStr : '${signObj.noncestr}', // 必填，生成签名的随机串
            signature : '${signObj.signature}',// 必填，签名，见附录1
            jsApiList : [ 'checkJsApi', //判断当前客户端版本是否支持指定JS接口
            'onMenuShareTimeline', //分享给好友
            'onMenuShareAppMessage', //分享到朋友圈
            'onMenuShareQZone', //分享到Q空间
            'onMenuShareWeibo',//分享到微博
            'onMenuShareQQ'//分享到qq
            ]
        // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
        var title="这个五一，一起做抗霾英雄！";
        var description="再不行动，听说我们的下一代就要这样生活";
        var imgUrl="${basePath}/<%=path %>/mayday/img/share.jpg";
        var shareBaseUrl='${baseUrl}';
        wx.ready(function() { //ready函数用于调用API，如果你的网页在加载后就需要自定义分享和回调功能，需要在此调用分享函数。//如果是微信游戏结束后，需要点击按钮触发得到分值后分享，这里就不需要调用API了，可以在按钮上绑定事件直接调用。因此，微信游戏由于大多需要用户先触发获取分值，此处请不要填写如下所示的分享API
            wx.onMenuShareTimeline({ //分享到朋友圈的API  
                        title : title, // 分享标题
                        link : shareBaseUrl+'/auth2.html', // 分享链接
                        imgUrl : imgUrl, // 分享图标
                        success : function() {
                            // 用户确认分享后执行的回调函数
                        },
                        cancel : function() {
                            // 用户取消分享后执行的回调函数
                        }
                    });
            wx.onMenuShareAppMessage({//分享到朋友 
                        title : title, // 分享标题
                        desc : description, // 分享描述
                        link : shareBaseUrl+'/auth2.html', // 分享链接
                        imgUrl : imgUrl, // 分享图标
                        type : 'link', // 分享类型,music、video或link，不填默认为link
                        dataUrl : '', // 如果type是music或video，则要提供数据链接，默认为空
                        success : function() {
                            // 用户确认分享后执行的回调函数
                        },
                        cancel : function() {
                            // 用户取消分享后执行的回调函数
                        }
                    });
            wx.onMenuShareQZone({//分享到qq空间
                title: title, // 分享标题
                desc: description, // 分享描述
                link: shareBaseUrl+'//auth2.html', // 分享链接
                imgUrl: imgUrl, // 分享图标
                success: function () { 
                   // 用户确认分享后执行的回调函数
                    
                },
                cancel: function () { 
                    // 用户取消分享后执行的回调函数
                }
            });
            wx.onMenuShareWeibo({
                title: title, // 分享标题
                desc: description, // 分享描述
                link: shareBaseUrl+'/auth2.html', // 分享链接
                imgUrl: imgUrl, // 分享图标
                success: function () { 
                   // 用户确认分享后执行的回调函数
                    
                },
                cancel: function () { 
                    // 用户取消分享后执行的回调函数
                }
            });
            wx.onMenuShareQQ({//分享到qq
                title: title, // 分享标题
                desc: description, // 分享描述
                link: shareBaseUrl+'/auth2.html', // 分享链接
                imgUrl: imgUrl, // 分享图标
                success: function () { 
                   // 用户确认分享后执行的回调函数
                    
                },
                cancel: function () { 
                   // 用户取消分享后执行的回调函数
                }
            });
        });
    </script>
    <script>
    $(function() {
        // $('.map').fadeIn(1000, function () {
            document.querySelector('body').addEventListener('touchstart', function (ev) {
                $('.prompt').css('display', 'none');
                // event.preventDefault();
            });
            /* 将地图移动到最右边 */ 
            var w = $('.china').width();
            $('.map').scrollLeft(w);
            
            /* 适配 */
            // 高度适配
            var screenH = $(window).height();
            $('.map').css('height', screenH);
            $('.map .china').css('height', screenH);
            // 比例
            var pct = parseInt(screenH) / 1136;
            // 不同屏幕适配
            var mapData = [
                { el: '.db', width: 386, top: 87, left: 894 },
                { el: '.hb', width: 435, top: 316, left: 677 },
                { el: '.hd', width: 305, top: 545, left: 813 },
                { el: '.hn', width: 676, top: 761, left: 481 },
                { el: '.hz', width: 339, top: 493, left: 499 },
                { el: '.xb', width: 662, top: 172, left: 29 },
                { el: '.xn', width: 535, top: 487, left: 66 }
            ];
            var jumpData = [
                {a: '.jump-db', width: 260, height: 210, top: 180, left: 960},
                {a: '.jump-hb', width: 310, height: 150, top: 410, left: 760},
                {a: '.jump-hd', width: 170, height: 230, top: 570, left: 910},
                {a: '.jump-hn', width: 190, height: 230, top: 770, left: 750},
                {a: '.jump-hz', width: 310, height: 210, top: 590, left: 530},
                {a: '.jump-xb', width: 350, height: 170, top: 550, left: 210},
                {a: '.jump-xn', width: 430, height: 210, top: 290, left: 130}
            ]
            // 地图块适配
            function compatible (el, width, top, left) {
                $(el).css({'width': width * pct, 'top': top * pct, 'left': left * pct});
            }
            for (var i = 0; i < mapData.length; i++) {
                compatible(mapData[i].el, mapData[i].width, mapData[i].top, mapData[i].left);
            }
            // 可点击区域适配
            function compatibleA (el, width, height, top, left) {
                $(el).css({'width': width * pct, 'height': height * pct, 'top': top * pct, 'left': left * pct});
            }
            for (var i = 0; i < jumpData.length; i++) {
                compatibleA(jumpData[i].a, jumpData[i].width, jumpData[i].height, jumpData[i].top, jumpData[i].left);
            }
            // 滑动
            $('.map').animate({scrollLeft: '0px'}, 5000, function(){
                $('.map').animate({scrollLeft: w}, 1000);
            });

            /* 闪烁 */
            for(var i = 0; i < mapData.length; i++) {
                $(mapData[i].el).delay(500 * i).fadeIn().fadeOut();
            }
        // });
    })
    </script>
</body>
</html>
